<script setup>
import { ref } from 'vue'
const emit = defineEmits([
  'currentIndexChanged',
  'onLeft',
  'onSelect',
  'onSearch'
])
const currentIndex = ref(0)
const underline = ref()
const onTab = (index) => {
  // 对下划线处理，处理得不是很好
  currentIndex.value = index
  const lineW = (window.innerWidth - 20) * 0.05
  const itemW = (window.innerWidth - 20) / 5
  const itemX = 10 + (itemW * index + itemW * 0.5 - lineW * 0.5 - 20)
  underline.value.style.marginLeft = itemX + 'px'
  // 对箭头处理，同意处理下箭头
  emit('currentIndexChanged',index)
}
const onLeft = () => {
  emit('onLeft')
}
const onSelect = () => {
  emit('onSelect')
}
const onSearch = () => {
  emit('onSearch')
}
</script>

<template>
  <div class="nav">
    <div class="bottom">
      <div class="search">
        <van-icon name="arrow-left" @click="onLeft" />
        <div class="search-input" @click="onSearch"></div>
        <span class="choose" @click="onSelect">筛选</span>
      </div>
    </div>

    <div class="tabs">

      <div class="tabs-div">
        <span class="tab" :class="{ 'tab-active': currentIndex === 0 }" @click="onTab(0)">
          综合
        </span>
        <span class="tab" :class="{ 'tab-active': currentIndex === 1 }" @click="onTab(1)">
          <div class="up-down">
            <div>
              <span>时间</span>
            </div>
            <div class="up-down-arrow">
              <van-icon name="arrow-up" />
              <van-icon name="arrow-down"/>
            </div>
          </div>
        </span>
        <span class="tab" :class="{ 'tab-active': currentIndex === 2 }" @click="onTab(2)">
          <div class="up-down">
            <div>
              <span>价格</span>
            </div>
            <div class="up-down-arrow">
              <van-icon name="arrow-up" />
              <van-icon name="arrow-down" ref="priceArrowDown" />
            </div>
          </div>
        </span>
        <span class="tab" :class="{ 'tab-active': currentIndex === 3 }" @click="onTab(3)">
          <div class="up-down">
            <div>
              <span>分类</span>
            </div>
            <div class="up-down-arrow">
              <van-icon name="arrow-down" ref="cateArrowDown" />
            </div>
          </div>
        </span>
        <span class="tab" :class="{ 'tab-active': currentIndex === 4 }" @click="onTab(4)">
          <div class="up-down">
            <div>
              <span>品牌</span>
            </div>
            <div class="up-down-arrow">
              <van-icon name="arrow-down" ref="brandArrowDown" />
            </div>
          </div>
        </span>
      </div>
      <div class="line" ref="underline">
      </div>
    </div>
  </div>
  
</template>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .bottom {
    background-color: #fff;
    width: 100%;
    height: calc(50 / 90 * 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .search {
      display: flex;
      justify-content: flex-start;

      .van-icon-arrow-left:before {
        font-size: 20px;
        padding-left: 10px;
        color: orange;
      }

      .search-input {
        display: inline-block;
        background-color: #f0f0f0;
        flex: 1;
        border-radius: 10px;
      }

      .choose {
        margin-right: 10px;
        line-height: 20px;
        margin-left: 20px;
      }
    }

  }

  .tabs {
    width: 100%;
    height: calc(40 / 90 * 100%);
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .tabs-div {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .tab {
        display: block;
        flex: 1;
        line-height: 38px;
        font-size: 14px;
        text-align: center;
        color: #666;

        .up-down {
          display: flex;
          align-items: center;

          .up-down-arrow {
            margin-left: 3px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .arrow-normal {
              font-size: 10px;
              color: #666;
            }
          }
        }
      }

      .tab-active {
        color: orange;
      }
    }

    .line {
      background-color: orange;
      width: 5%;
      height: 2px;
      margin-left: 7%;
      transition: left 1s ease;
      /* 左右移动过渡效果 */
    }
  }
}


</style>